<template>
  <div class="home">
    <el-container>
      <el-header style="height: 100px">
        <div>
          <img src="@/assets/logo.png" alt="" srcset="" />
          <span>W2207A后台订单管理系统</span>
        </div>
        <div class="btn-outlogin">
          <el-button type="danger" @click="outLogin" size="mini"
            >退出登录</el-button
          >
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '60px' : '250px'">
          <div @click="isCollapse = !isCollapse" style="height: 20px"></div>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#2c2c2c"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
            :collapse="isCollapse"
            :collapse-transition="false"
            :router="true"
          >
            <!-- collapse控制其展开和折叠 -->
            <el-submenu
              :index="item.id + ''"
              v-for="(item, index) in menuList"
              :key="item.id"
            >
              <template slot="title">
                <!-- 显示矢量图标 有两种思路
                {}  key：value    5对key value   value iconfont icon-xxx
                key item.id
                []  iconfont icon-xx,  [index]
                
                 -->
                <i style="margin-right: 10px" :class="iconsArr[index]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item
                :index="'/' + itemSub.path"
                v-for="itemSub in item.children"
                :key="itemSub.id"
              >
                <i class="el-icon-menu"></i>
                <span slot="title">{{ itemSub.authName }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { left_menu_req } from "@/api/menu.js";
export default {
  data() {
    return {
      menuList: [],
      iconsArr: [
        "iconfont icon-users",
        "iconfont icon-lock_fill",
        "iconfont icon-shangpin",
        "iconfont icon-danju",
        "iconfont icon-baobiao",
      ],
      isCollapse: false,
    };
  },
  async mounted() {
    this.getMenuList();
  },
  methods: {
    async getMenuList() {
      const result = await left_menu_req({
        method: "get",
        url: "menus",
      });
      console.log(result);
      if (result.meta.status == 200) {
        this.menuList = result.data;
      }
    },
    outLogin() {
      /* 使用到的知识点 sessionStorage的增删改查 */
      /* clear removeItem */
      window.sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  .el-container {
    height: 100%;
    .el-header {
      background-color: #dddddd;
      color: #333;
      text-align: center;
      line-height: 100px;
      display: flex;
      justify-content: space-between;
      div {
        img {
          width: 50px;
          height: 50px;
        }
        span {
          font-size: 30px;
          font-weight: 700;
        }
      }
      .btn-outlogin {
        height: 50px;
      }
    }
    .el-container {
      .el-aside {
        background-color: #2c2c2c;
        color: white;
        text-align: center;
        line-height: 200px;
        .el-menu {
          .el-submenu {
            .el-menu-item {
              margin-left: 30px;
            }
          }
        }
      }

      .el-main {
        background-color: #e9e8e8;
        color: #333;
        text-align: center;
      }
    }
  }
}
</style>